{include file="common/header-top" /}

<style>

    .job-detail-title-cell{
        padding: 3px 16px;
    }

    .job-detail-title{
        font-size: 18px;
        font-weight: 500;
    }

    .job-detail-money-cell{
        margin-top: 2px;
    }
    .job-detail-money{
        display: block;
        padding: 5% 10%;
    }
    .job-detail-money span{
        display: block;
        text-align: center;
        padding: 2% 0%;
    }
    .job-detail-article{
        font-size: .8rem;
        color: #2a2a2c;
        padding: 0% 4%;
    }

</style>

<div id="app"  v-cloak>


    <van-nav-bar title="审核兼职-兼职详情" left-arrow @click-left="goBack" left-text="返回">
    </van-nav-bar>

    <!--兼职头部标题-->
    <van-row style="margin-top: 3%;">
        <van-col span="18">
            <van-cell :border="false" class="job-detail-title-cell">
                <span class="van-ellipsis job-detail-title" :title="jobDetail.title">{{jobDetail.title}}</span>
            </van-cell>
            <van-cell  icon="/__FRONT__/images/icon/baozhang.png" :border="false"  class="job-detail-title-cell">
                <van-tag type="success">平台认证</van-tag>
            </van-cell>
            <van-cell :border="false"  class="job-detail-title-cell">
                <span>招聘人数：{{jobDetail.need_worker}}人/{{jobDetail.had_worker}}人</span>
            </van-cell>
        </van-col>

        <van-col span="6" class="job-detail-money-cell">
            <van-tag plain class="job-detail-money">
                <span class="money-font" style="font-size: 22px;color: #fe9e39;">{{jobDetail.salary}}</span>
                <span>{{jobDetail.salary_unitCh}}</span>
                <span style="color: #2a2a2c;font-weight: bold;">{{jobDetail.settlement_typeCh}}</span>
            </van-tag>
        </van-col>
    </van-row>
    <!--兼职头部标题-->


    <van-divider :style="{borderColor: '#32a14a', padding: '0 16px' }"></van-divider>

    <van-cell :title="jobDetail.address"
              icon="/__FRONT__/images/icon/location-icon.png"
              is-link
              style="padding-top: 0px;"
              :border="false"
    ></van-cell>

    <!--招聘详情-->
    <van-row>
        <van-cell title="兼职详情" icon="/__FRONT__/images/icon/job-detail-icon.png" size="large">
            <van-icon name="arrow-down"></van-icon>
        </van-cell>
        <van-cell>
            <van-icon name="location">详细地址:</van-icon>
            <span style="padding-left: 5%;">{{jobDetail.provinces_name}} {{jobDetail.address}}</span>
        </van-cell>
        <van-cell>
            <van-icon name="clock">工作时间:</van-icon>
            <span style="padding-left: 5%;">{{jobDetail.work_timeCh}}</span>
        </van-cell>
        <van-cell>
            <van-icon name="friends">性别要求:</van-icon>
            <span style="padding-left: 5%;">{{jobDetail.genderCh}}</span>
        </van-cell>
        <van-cell>
            <van-icon name="/__FRONT__/images/icon/job-detail-welfare.png"></van-icon>
            <span style="color: #323233; text-align: left;">福利:</span>
            <div class="van-multi-ellipsis--l3" v-if="jobContent.work_welfare">
                <template v-for="item in jobContent.work_welfareArr">
                    <p>{{item}}</p>
                </template>
            </div>
            <div class="van-multi-ellipsis--l3" v-else>
                <span>暂无</span>
            </div>
        </van-cell>
    </van-row>
    <!--招聘详情-->


    <van-divider :style="{borderColor: '#32a14a', padding: '0px', margin: '0px'}"></van-divider>

    <!--工作要求-->
    <van-row>
        <van-cell title="工作要求" icon="/__FRONT__/images/icon/job-detail-require.png" size="30px">
            <van-icon name="arrow-down"></van-icon>
        </van-cell>
        <van-col span="24">
            <article class="job-detail-article">
                <template v-for="item in jobContent.requirementArr">
                    <p>{{item}}</p>
                </template>
            </article>
        </van-col>
    </van-row>
    <!--工作要求-->

    <van-divider :style="{borderColor: '#32a14a', padding: '0px', margin: '0px'}"></van-divider>

    <!--工作内容-->
    <van-row>
        <van-cell title="工作内容" icon="/__FRONT__/images/icon/job-detail-content.png" size="30px">
            <van-icon name="arrow-down"></van-icon>
        </van-cell>
        <van-col span="24">
            <article class="job-detail-article">
                <template v-for="item in jobContent.contentArr">
                    <p>{{item}}</p>
                </template>
            </article>
        </van-col>
    </van-row>
    <!--工作内容-->

    <van-divider :style="{borderColor: '#32a14a', padding: '0px', margin: '0px'}"></van-divider>

    <!--招聘人信息-->
    <van-row style="padding-bottom: 55px;">
        <van-cell title="招聘者" icon="/__FRONT__/images/icon/job-detail-from.png" size="30px"></van-cell>
        <van-col span="5">
            <van-image
                    round
                    width="60"
                    height="60"
                    :src="getPublishAvatar"
            ></van-image>
        </van-col>
        <van-col span="12">
            <van-cell style="padding: 4px 5px;" :border="false">
                <span>{{jobDetail.contacts}}</span>
            </van-cell>
            <van-cell style="padding: 2px 5px;" :border="false">
                <span>联系方式：{{jobDetail.mobile}}</span>
            </van-cell>
        </van-col>
        <van-col span="6">
            <div style="padding-top: 10%;display: block;">
                <a :href="getCallHref">
                    <van-button
                            icon="/__FRONT__/images/icon/job-detail-mobile.png"
                            type="primary"
                    >Call
                    </van-button>
                </a>
            </div>
        </van-col>
    </van-row>
    <!--招聘人信息-->




    <van-row v-show="showOption">
        <van-col span="24">
            <van-goods-action>
                <van-goods-action-button
                        type="danger"
                        color="#f32108"
                        text="审核不通过"
                        style="border-radius: 0px; margin-left: 0px;"
                        @click="clickShowPop"
                >
                </van-goods-action-button>
                <van-goods-action-button
                        type="primary"
                        :text="passText"
                        style="border-radius: 0px; margin-right: 0px;"
                        @click="postAuditJob(1)"
                >
                </van-goods-action-button>
            </van-goods-action>
        </van-col>
    </van-row>


    <!--错误信息弹窗-->
    <van-popup
        v-model="showErrorPop"
        get-container="#app"
        position="center"
        style="width: 100%;"
        round
    >
        <van-row>
            <van-col span="24" style="text-align: center;">
                <span>审核不通过理由?</span>
            </van-col>
            <van-col span="24">
                <van-cell-group>
                    <van-field
                            v-model="errorMsg"
                            rows="5"
                            type="textarea"
                            autosize
                            placeholder="请输入审核不通过的理由"
                    ></van-field>
                </van-cell-group>
            </van-col>
            <van-divider></van-divider>
            <van-col span="24" style="padding-bottom: 10px">
                <van-button
                        type="warning"
                        style="float: left; margin-left: 20px;"
                        size="small"
                        @click="cancelPassNot"
                >取消</van-button>
                <van-button
                        type="primary"
                        style="float: right; margin-right: 20px;"
                        size="small"
                        @click="confirmPassNot"
                >确定</van-button>
            </van-col>
        </van-row>
        </van-cell-group>
    </van-popup>
    <!--错误信息弹窗-->


</div>


<script>


    Vue.use(vant.Lazyload);

    var vm = new Vue({
        //挂载点
        el: '#app',
        //数据集合
        data() {
            return {
                active: 1,
                userCenterIcon: {
                    normal: '/__FRONT__/images/icon/usercenter-n.png',
                    active: '/__FRONT__/images/icon/usercenter-a.png'
                },
                erShouIcon: {
                    normal: '/__FRONT__/images/icon/ershou-n.png',
                    active: '/__FRONT__/images/icon/ershou-a.png'
                },

                showErrorPop: false,

                errorMsg: '',

                jobDetail:{},
                jobContent:{},
                publishUser:{},


            }
        },

        //创建时执行 操作
        created : function (){
            var params = {
                id: '{$jobId}',
                extend: 'content,publishUser'
            };
            //获取兼职详情
            axiosRequest.get('/api/job/detail',{params:params}).then(function (response) {
                if (response.code == 200) {
                    vm.$data.jobDetail = response.data;
                    vm.$data.jobContent = response.data.extendContent;
                    vm.$data.publishUser = response.data.extendPublishUser;
                } else {
                    vant.Toast({
                        message: response.msg,
                        onClose: function () {
                            history.back();
                        }
                    });
                }
            });
        },

        computed:{
            getCallHref(){
                return 'tel:' + this.jobDetail.mobile;
            },
            getPublishAvatar(){
                return this.publishUser.avatar ? this.publishUser.avatar : '/__FRONT__/images/icon/publish-user-logo.png';
            },
            showOption(){
                return (this.jobDetail.status != 2) ? true : false;
            },
            passText(){
                return (this.jobDetail.status == 1) ? '审核通过' : '再次审核';
            }
        },

        //方法集合 在 `methods` 对象中定义方法
        methods: {
            //返回上一页
            goBack(){
                history.back();
            },

            clickShowPop(){
                this.showErrorPop = true;
            },

            cancelPassNot(){
                this.showErrorPop = false;
                this.errorMsg = '';
            },
            confirmPassNot(){
                this.showErrorPop = false;
                this.postAuditJob(2);
            },

            postAuditJob(status){
                var postData = {
                    jobId: this.jobDetail.id,
                    pass: status,
                    message: this.errorMsg
                };
                axiosRequest.post('/api/job/auditJob', postData).then(function (response) {
                    if (response.code == 200) {
                        vant.Toast('操作成功！');
                        vm.$data.jobDetail.status = response.data.status;
                    } else {
                        vant.Toast({
                            message: response.msg,
                        });
                    }
                });
            }
        }
    });


</script>


